import React from "./react";
import ReactDOM from "./react-dom/client";
//ref比较特殊，是放在虚拟DOM上的，或者说React元素上的，而不是放在属性上的
function FancyInput(props, forwardRef) {
  // 1、先创建自己的 ref
  const inputRef = React.useRef();
  // 2、 参数 1 是forward转发过来的ref,第 2 个参数是一个工厂函数，可以返回一个对象，此对象将被传递给 forward 转发过来的 ref
  // 实现 哪些会被 父组件看到
  React.useImperativeHandle(forwardRef, () => ({
    focus() {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
}
const ForwardFancyInput = React.forwardRef(FancyInput);
function ParentComponent() {
  const inputRef = React.useRef();
  const focus = () => {
    //inputRef.current可以取到子组件的真实DOM

    inputRef.current?.focus();

    //这样做的话有可能不安全，破坏了子组件的封装性
    //inputRef.current.remove();
  };
  return (
    <div>
      <ForwardFancyInput ref={inputRef} />
      <button onClick={focus}>focus</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ParentComponent />);
